<template>
  <div class="home">
    <div class="content">
      <div class="content-left">
        <div>
          <div class="content-left-one">
            <div class="name">{{ tasks.name }}</div>
            <div class="planB">{{ tasks.salary }}</div>
          </div>
          <span class="tag">{{ tasks.typeName }}</span>
          <div class="content-left-three">
            <div>
              <div>发布时间: {{ tasks.createtime }}</div>
              <div>截止时间: {{ tasks.deadtime }}</div>
            </div>
            <div>
              <el-button type="primary" size="large">提交方案</el-button>
            </div>
          </div>
          <div>
            <div class="separate">需求</div>
            <div>
              <div style="border: 1px solid #ccc">
                <Editor
                  style="height: 500px; overflow-y: hidden"
                  v-model="valueHtml"
                  :defaultConfig="editorConfig"
                  :mode="mode"
                  @onCreated="handleCreated"
                />
              </div>
            </div>
          </div>
          <div v-if="tasks.fileIn">
            <div class="separate">附件</div>
            <div>
              <div style="cursor: pointer" @click="downloadImage">点击下载</div>
            </div>
          </div>
        </div>
        <div class="content-left-down">
          <div class="apply">报名列表</div>
          <div class="users">
            <ul>
              <li v-for="(item, index) in form.users" :key="index">
                <img :src="item.avatar" alt="加载中……" />
                <p>{{ item.username }}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="img">
          <img :src="author.avatar" alt="加载中……" />
        </div>
        <h5>{{ author.username }}</h5>
        <div class="place">发布者所在地:{{ author.location }}</div>
        <div>3个没用的小图标</div>
        <div class="content-right-bottom" style="margin: 0px">
          <div>
            <h3>{{ form.taskNum }}</h3>
            <div>发布总数</div>
          </div>
          <div>
            <h3>{{ author.credit }}</h3>
            <div>信誉积分</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="">
import { getTaskUserByIdApi } from "@/api/task/api";
import { TaskInfo, TaskUserInfo } from "@/api/task/type";
import { UserInfo } from "@/api/user/type";
import { onBeforeMount, reactive } from "vue";
import { useRoute } from "vue-router";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import E from "wangeditor";
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

const mode = "default";

// 内容 HTML
const valueHtml = ref("");

// // 模拟 ajax 异步获取内容
// onMounted(() => {
//   setTimeout(() => {
//     // valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
//   }, 1500);
// });
// 获取编辑器对象

const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容...", readOnly: true };
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor === null) return;
  editor.destroy();
});

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const route = useRoute();

const tasks = reactive<TaskInfo>({
  id: 0,
  pid: 0,
  name: "",
  typeName: "",
  requirements: "",
  salary: 0,
  score: 0,
  difficulty: 0,
  author: 0,
  worker: 0,
  role: 0,
  audit: 0,
  finish: false,
  fileIn: "",
  fileOut: "",
  avatar: "",
  deadtime: "",
  createtime: "",
  updatetime: "",
  img: ""
});

const author = reactive<UserInfo>({
  id: 0,
  username: "",
  email: "",
  gender: 0,
  avatar: "",
  birthday: "",
  introduction: "",
  userRole: "",
  accessToken: "",
  refreshToken: "",
  credit: 0,
  location: ""
});
const form = reactive<TaskUserInfo>({
  task: tasks,
  author: author,
  taskNum: 0,
  users: []
});

function downloadImage() {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", tasks.fileIn, true);
  xhr.responseType = "blob";
  xhr.onload = function (e) {
    if (this.status === 200) {
      const type = tasks.fileIn.split(".");
      const blob = new Blob([this.response], { type: type[1] });
      const objectUrl = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = objectUrl;
      a.download = "附件-" + tasks.name + "." + type[1];
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }
  };
  xhr.send();
}
onBeforeMount(() => {
  if (route.params.id === null) {
    return;
  }
  getTaskUserByIdApi(Number(route.params.id)).then((res) => {
    if (res.code === 200) {
      Object.assign(tasks, res.data.task);
      Object.assign(author, res.data.author);
      Object.assign(form.users, res.data.users);
      form.taskNum = res.data.taskNum;
      valueHtml.value = res.data.task.requirements;
    }
  });
});
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  background-color: aqua;
  position: relative;
}
.content {
  width: 70%;
  height: auto;
  background-color: antiquewhite;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  padding: 10px;

  &-left {
    width: 70%;
    height: auto;
    background-color: aquamarine;
    margin-right: 20px;
    padding-bottom: 20px;
    &-one {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding-bottom: 20px;
    }
    &-three {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      color: grey;
      margin: 10px;
      div {
        margin: 2px;
      }
    }
    &-down {
      margin-top: 10px;
      // height: fit-content;
      background-color: darksalmon;
    }
  }
  &-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    background-color: white;
    width: 100%;
    height: 350px;
    margin-bottom: 20px;
    text-align: center;

    img {
      width: 100%;
      height: 100%;
    }
    h5 {
      font-size: 16px;
    }
    div {
      margin: 10px;
    }
    &-bottom {
      display: flex;
      flex-direction: row;
      background-color: rgb(189, 178, 178);
      margin-bottom: 15px;
      margin-left: 0px;
      width: 100%;
      justify-content: space-around;
    }
  }
}
.name {
  font-size: 26px;
  overflow: hidden;
  font-weight: 700;
  color: #151519;
}
.planB {
  font-size: 26px;
  font-weight: 200;
  color: red;
  &::before {
    content: "￥";
  }
}
.tag {
  width: 40px;
  padding: 5px;
  font-size: 16px;
  font-weight: 400;
  background-color: aliceblue;
}
.separate {
  font-weight: 700;
  font-size: 16px;
  color: #151519;
  padding-left: 10px;
  border-left: 5px solid #1890ff;
}
.apply {
  height: 45px;
  line-height: 45px;
  border-bottom: 1px solid #efefef;
  padding: 0 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  color: #151519;
}
.img {
  height: 90px;
  margin: 20px auto;
  img {
    object-fit: cover;
    border-radius: 50%;
    width: 90px;
  }
}
.place {
  color: #999;
  font-size: 13px;
  line-height: 23px;
}
.users {
  margin: 10px;
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: row;

  ul {
    display: flex;
    flex-direction: row;
  }
  img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: block;
    margin-bottom: 10px;
    margin-right: 20px;
  }
  p {
    width: 60px;
    height: auto;
    overflow: hidden; //超出隐藏
    white-space: nowrap; //不换行
    text-overflow: ellipsis; //点点显示
  }
  p:hover {
    height: auto;
    word-break: break-all;
    white-space: pre-wrap;
    text-decoration: none;
  }
}
</style>
